import React from 'react'
import { Input } from '../components/common/Input'
import { renderEditorOfElementWithExtSelector } from '../components/common/elementWithExtSelector'

export const UserActionTypes = {
    click: {
        title: '鼠标点击',
        renderEditor: (params) => {
            return (
                <React.Fragment>
                    元素：{renderEditorOfElementWithExtSelector(params)}
                </React.Fragment>
            )
        }
    },
    clickAtPostion: {
        title: '在指定坐标单击',
        renderEditor: ({ index, data, readOnly, onChangeField }) => {
            const { x, y } = data

            return (
                <React.Fragment>
                    坐标：(
                    <Input className='width_40px' value={x} placeholder='x' type='number' onChange={x => onChangeField(index, 'x', +x)} readOnly={readOnly} />,
                    <Input className='width_40px' value={y} placeholder='y' type='number' onChange={y => onChangeField(index, 'y', +y)} readOnly={readOnly} />)
                </React.Fragment>
            )
        }
    },
    mouseDown: {
        title: 'mouseDown',
        renderEditor: (params) => {
            return (
                <React.Fragment>
                    元素：{renderEditorOfElementWithExtSelector(params)}
                </React.Fragment>
            )
        },
    },
    type: {
        title: '键入文本',
        renderEditor: (params) => {
            const { index, data, readOnly, onChangeField } = params
            const { text = '' } = data

            return (
                <React.Fragment>
                    元素：{renderEditorOfElementWithExtSelector(params)}
                    文本：<Input className='width_150px' value={text} placeholder='文本值' type='text' onChange={text => onChangeField(index, 'text', text)} readOnly={readOnly} />
                </React.Fragment>
            )
        }
    },
    hover: {
        title: '鼠标滑过',
        renderEditor: (params) => {
            return (
                <React.Fragment>
                    元素：{renderEditorOfElementWithExtSelector(params)}
                </React.Fragment>
            )
        },
    },
    mouseLeave: {
        title: '鼠标滑出',
        renderEditor: (params) => {
            return (
                <React.Fragment>
                    元素：{renderEditorOfElementWithExtSelector(params)}
                </React.Fragment>
            )
        },
    },
    keyPress: {
        title: '触发按键',
        renderEditor: (params) => {
            const { index, data, readOnly, onChangeField } = params
            const { keyCodes = [] } = data     // keyCodes由 {key, code} 对象组合成的数组

            return (
                <React.Fragment>
                    元素：{renderEditorOfElementWithExtSelector(params)}
                    按键：<Input className='width_150px' value={keyCodes.map(item => item.key).join(',')} placeholder='文本值' type='text'
                        readOnly={readOnly} showClear={true} onClear={() => onChangeField(index, 'keyCodes', [])}
                        onKeyDown={ev => onChangeField(index, 'keyCodes', [...keyCodes, { key: ev.key, code: ev.keyCode }])}
                    />
                </React.Fragment>
            )
        }
    },
}

export class UserActionProvider {
    static getAllUserActionTypes() {
        return Object
            .keys(UserActionTypes)
            .map(key => ({
                ...UserActionTypes[key],
                code: key
            }))
    }
}